<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New User Registration</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css"></link>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="../js/jquery-latest.js"> </script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){

		
    $("#registerUser").validate({
	         rules: {
    	    password: "required",
    	    password_retype: {
    	      equalTo: "#password"
    	    }
    	  }
    	});

    

     $("#datepicker1").datepicker({
  	   onSelect: function(dateText, inst) { 

  			$("#dob").val(dateText);
  			


  	    },
  	    dateFormat: "yy-mm-dd",
  	   changeYear: true,
  	 yearRange: '1900:2010'
  	       	     


  });
   });

</script>
</head>

<body>

<p style="font-weight: bolder; color: green" align="center">
<%

if(request.getAttribute("registerSuccess") != null){
	out.print(request.getAttribute("registerSuccess"));
	request.setAttribute("registerSuccess", null);
}

%>

</p>
	
	<form action="editCustomer.do" method="POST" id="registerUser">
	<table style="COLOR: #004040; FONT-WEIGHT: bold; FONT-SIZE: x-small; FONT-FAMILY: 'Verdana'; 
vertical-align: top; border-bottom-style:solid; ; border-bottom-color: gray; 
					border-right-style:solid; ; border-right-color: gray; 
					border-left-style:solid; ; border-left-color: gray; border-top-style:solid; ; border-top-color: gray" align="center">
	
		<thead style="BACKGROUND-COLOR: #fbfe70; font-size: " >
			<tr>
			<td colspan="11" align="center" colspan=2> Please enter the following details
			</td>
		</tr>
		</thead>
		<tr>
			<td align="right">Username *</td>
			<td>
				<input type="text" id="username" name="username" class="required" minlength="1" maxlength="45" readonly="readonly" value="<c:out value='${customer.userName}'></c:out>">
				<div id="divCheckUser" style="display:none; color: red">User already exists</div>
				
			</td>
		</tr>
		<tr>
			<td align="right">Password *</td>
			<td>
				<input type="password" id="password" name="password" class="required" minlength="1" maxlength="45" value="<c:out value='${customer.password}'></c:out>">
			</td>
		</tr>
		<tr>
			<td align="right">Retype Password *</td>
			<td>
				<input type="password" id="password_retype" name="password_retype" class="required" minlength="1" maxlength="45" value="<c:out value='${customer.password}'></c:out>">
			</td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td align="right">First Name *</td>
			<td>
				<input type="text" id="firstName" name="firstName" maxlength=100 class="required" value="<c:out value='${customer.firstName}'></c:out>">
			</td>
		</tr>
	
		<tr>
			<td align="right">Last Name*</td>
			<td>
				<input type="text" id="lastName" name="lastName"  class="required" maxlength="100" value="<c:out value='${customer.lastName}'></c:out>">
			</td>
		</tr>
		<tr>
			<td align="right">Date Of Birth*</td>
			<td>
				<input type="text" id="dob" name="dob" class="required" maxlength="10" readonly="readonly" value="<c:out value='${customer.dateOfBirth}'></c:out>"> 
			</td>
		</tr>
		<tr>
			<td colspan=4 align= "center">
				<div id="datepicker1" ></div>
			
			</td>
		</tr>
		<tr>
			<td align="right">Address Line1*</td>
			<td>
				<input type="text" id="addressLine1" name="addressLine1" class="required" maxlength="100" value="<c:out value='${customer.addressLine1}'></c:out>">
			</td>
		</tr>
		<tr>
			<td align="right">Address Line2</td>
			<td>
				<input type="text" id="addressLine2" name="addressLine2" maxlength="100" value="<c:out value='${customer.addressLine2}'></c:out>">
			</td>
		</tr>
		<tr>
			<td align="right">City*</td>
			<td>
				<input type="text" id="city" name="city" class="required" maxlength="100" value="<c:out value='${customer.city}'></c:out>">
			</td>
		</tr>
		<tr>
			<td align="right">State*</td>
			<td>
				<input type="text" id="state" name="state" class="required" maxlength="100" value="<c:out value='${customer.state}'></c:out>">
			</td>
		</tr>
		<tr>
			<td align="right">Zip Code*</td>
			<td>
				<input type="text" id="zip" name="zip" class="required digits" maxlength="5" value="<c:out value='${customer.zip}'></c:out>">
			</td>
		</tr>
		
		<tr>
			<td align="right">Nationality*</td>
			<td>
				<input type="text" id="nationality" name="nationality" class="required" maxlength="10" value="<c:out value='${customer.nationality}'></c:out>"> 
			</td>
		</tr>
		<tr>
			<td align="right">Passport Number*</td>
			<td>
				<input type="text" id="passportNumber" name="passportNumber" class="required" maxlength="10" value="<c:out value='${customer.passportNumber}'></c:out>">
				<input type="hidden" id="id" value="<c:out value='${customer.id}'></c:out>" name="id"></input>
				<input type="hidden" id="from" value="<c:out value='${param.from}'></c:out>" name="from"></input>  
			</td>
		</tr>
			
		<tr>
			<td colspan=2 align="center">	
			<input type="submit" name="Submit" id="submit" value="Submit" > &nbsp;
			<input type="reset" value="Clear"></input> </td>
		</tr>
		
		
	</table>

</form>
</body>
</html>